@import '../mixins';

.notification-banner + .compare-form {
  border-top: var(--base-border);
}

.notification-banner {
  background: var(--notification-banner-background);
  border: var(--base-border);
  border-color: var(--notification-banner-border-color);
  border-radius: var(--border-radius);
  display: flex;
  padding: var(--spacing);
  position: relative;

  .notification-icon {
    margin-right: var(--spacing-half);
  }

  &-content {
    display: flex;
    flex-wrap: wrap;

    p {
      flex-grow: 1;
      font-size: var(--font-size-sm);
      margin: 0;
      padding-right: var(--spacing-double); // Extra space for the close button

      & + p {
        margin-top: var(--spacing-half);
      }
    }
  }

  @include close-button;

  .ref-component {
    background: var(--notification-ref-background);
    word-break: normal;
  }

  .close {
    position: absolute;
    margin: 0;
    top: var(--spacing);
    right: var(--spacing);
    text-align: center;

    .octicon {
      height: 12px;
    }
  }
}

.diverge-banner {
  margin: var(--spacing-half);
  overflow: hidden;

  &-enter {
    max-height: 0;
    opacity: 0;

    &-active {
      max-height: 200px;
      opacity: 1;
      transition: all var(--undo-animation-duration) cubic-bezier(0, 0, 0.2, 1);
    }
  }

  &-exit {
    max-height: 200px;

    &-active {
      max-height: 0;
      opacity: 1;
      transition: max-height 300ms cubic-bezier(0.4, 0, 0.2, 1);

      .diverge-banner {
        transform: translateX(-102%);
        opacity: 0;
        transition: all 180ms cubic-bezier(0.4, 0, 1, 1);
      }
    }
  }

  &-wrapper {
    overflow: hidden;
    box-shadow: inset 0 -1px var(--box-border-color);
  }
}

.notification-banner-content-body {
  margin-bottom: var(--spacing-half);
}

.notification-banner-content {
  .button-component {
    margin-top: var(--spacing-half);
    margin-right: var(--spacing-half);
  }
}
